import { Avatar, Divider, Icon, Image, Input, Message, Modal, Trigger } from "@arco-design/web-react"
import React, { useEffect, useRef, useState } from "react";
import { UserInfo } from "../../../domain/user";
import { IconDelete, IconMessage, IconPlus, IconSearch, IconUser, IconUserAdd, IconVideoCamera, IconVoice } from "@arco-design/web-react/icon";
import { UserModelBlock, UserModelElement } from "./user_model";

import http from "../../../http"
import { useDispatch, useSelector } from "react-redux";
import { LeoAvatar } from "../../../components/leo_Avatar";
import { AddFriendModel } from "./add_friend";
import { setType } from "../../../store/features/friend";

export const FriendSearch: React.FC<any> = ({ refreshFriendRecord }) => {

    const [text, setText] = useState('');
    const searchInput: any = useRef<any>(null);
    const [visible, setVisible] = useState(false);


    const dispatch = useDispatch();

    const [searchState, setSearchState] = useState(false);
    const [searchUser, setSearchUser] = useState<any>(null);


    const loading = () => {
        // searchInput.current.focus()
        const close = Message.loading({
            id: 'need_update',
            content: '正在搜索....',
        });

        const fetchUser = async () => {
            const reponse: any = await http.get("/getUser?userName=" + text);
            if (reponse.code != 200) {
                close();
                setSearchState(true);
                setSearchUser(null);
            } else {
                close();
                console.log(reponse.data);
                setSearchState(true);
                setSearchUser(reponse.data);
            }
        }
        fetchUser();
    }


    const [visibleAdd, setVisibleAdd] = useState(false);

    const clickAddFriend = () => {
        setVisible(false);
        setVisibleAdd(true);

    }

    const sendFind = () => {
        refreshFriendRecord();
        dispatch(setType(1))
    }




    const popup = () => {
        return (text.length > 0 ? <div className='bg-white search_popup w-[260px] flex flex-row items-center  overflow-hidden' >
            {
                searchState && searchUser == null ? <div className="flex flex-row justify-center h-[50px] items-center w-full text-gray-600"> 用户不存在 </div> :

                    searchState && searchUser ?
                        <div className="cursor-pointer p-3  contacts w-full" onClick={() => setVisible(true)}>
                            <LeoAvatar userPortrait={searchUser.userPortrait} userName={searchUser.nickName}></LeoAvatar>
                            <span className="ml-2 text-[14px]">{searchUser.nickName}</span>
                        </div> :
                        <div className="p-3 flex flex-row  contacts justify-center items-center w-full" onClick={loading}>

                            <div className="bg-[#00B42A] min-w-[40px] w-[40px] h-[40px] flex  items-center justify-center text-white text-[25px] rounded-lg font-bold "> <IconUserAdd /></div>
                            <div className=" pl-2  flex flex-row text-[14px] cursor-pointer " >
                                <span className="w-[40px] "> 搜索:</span>
                                <span className="inline-block text-[#00B42A] w-[150px] break-words text-left">{text}</span>
                            </div>
                        </div>
            }

        </div> : <div></div>);
    }

    const [onFocus, setOnFocus] = useState(false);

    const [popupVisible, setPopupVisible] = useState(false);


    useEffect(() => {

    }, [popupVisible, onFocus])
    return <>
        <UserModelBlock
            isVisible={visible}
            onVisibilityChange={() => { setVisible(false) }}
        >
            {

                searchUser &&
                <>
                    <AddFriendModel sendFind={sendFind} userInfo={searchUser} visibleAdd={visibleAdd} setVisibleAdd={setVisibleAdd} ></AddFriendModel>
                    <UserModelElement clickAddFriend={clickAddFriend} userInfo={searchUser} ></UserModelElement>

                </>

            }
        </UserModelBlock>

        <div className='relative flex flex-row items-center p-3  w-full px-3 border-b border-b-gray-200'>
            <Trigger
                onClickOutside={() => {
                    setPopupVisible(false);
                }}
                popupVisible={popupVisible}
                popup={popup} position='bottom' className='mt-2' >
                <div className="w-full">
                    <div className="w-[220px]" onClick={() => { setPopupVisible(true) }}>
                        <Input
                            onBlur={() => {
                                console.log("失去焦点")
                                setOnFocus(false);
                            }}
                            onFocus={() => {
                                console.log("获取焦点")
                                setOnFocus(true);
                            }}
                            ref={searchInput}
                            onChange={(e) => {
                                if (searchState) {
                                    setSearchState(false)
                                }
                                setText(e)

                            }}
                            maxLength={11}
                            prefix={<IconSearch />}
                            placeholder='手机号'
                        />
                    </div>
                </div>


            </Trigger>

            <div className="absolute right-3 ">


                {
                    !onFocus && <div onClick={(e) => {
                        e.stopPropagation(); // 阻止事件冒泡
                        console.log("点击获取焦点时间")
                        searchInput.current.focus();
                        setPopupVisible(true);
                    }} className=" ml-2 w-[37px] h-[32px] text-center bg-[#f2f3f5] content-center  cursor-pointer rounded-md">
                        <IconUserAdd className="text-[#86909c]"></IconUserAdd>
                    </div>
                }
                {
                    onFocus &&
                    <div className="w-[40px] ml-3 text-gray-600 font-bold" onClick={(e) => {
                        setOnFocus(false);
                        searchInput.current.blur();
                        setPopupVisible(false);
                    }}>
                        取消
                    </div>

                }
            </div>
        </div>



    </>
}